
/*
 *@author: YangJie
 *@date: 2021-04-09 10:49:49
 *@version:
 *@description: 参数设置->系统管理->审核流程
 */
import React, { Component } from 'react';
import { Table, Button, Form, Tabs } from 'antd';
import '@/assets/css/settings';
import BasicDrawer from '../../../components_yyr/common/basicDrawer';
import Paging from '../../../components_yyr/commponent/Paging';
import BasicConfirm from '../../../components_yyr/common/basicConfirm';
import { euqApplicationName, lotAuth, lotAuth2 } from '../../../config'

const { TabPane } = Tabs;

class AuditProcess extends Component {
	state = {
		loading: false, //加载中...
		dataSource: [], //数据源
		drawerVisible: false, //新增修改抽屉的显示与隐藏
		chooseData: {}, //用checkbox选择好的数据
		drawerTitle: '', //抽屉的标题
		total: 0, //总数据量
		formValues: {},
		lclx:[],
		roleList:[],
		selectedKeys:[],selectedData:[]
	};
	componentDidMount() {
		this.fetch({
			pageNum: 1,
			pageSize: 10
		});
		this.lclx();
		this.roleList()
	}
	//初始化加载数据
	fetch = data => {
		this.setState({ loading: true })
		this.get(euqApplicationName + '/parameter_setting_system/queryExamineList').then(res => {
			this.setState({
				loading: false,
				dataSource: res.data.data,
				total:res.data.total,
				formValues:data
			});
		})
	};
	lclx = () => {
		this.get(euqApplicationName + '/api/findEquipmentNextParameterPageList?typeId=17').then(res => {
			this.setState({
				 lclx: res.data,
			});
		})
	}
	roleList = () => {
		// this.get(lotAuth + '/role/queryPageRole?pageNum=1&pageSize=9999').then(res => {
			this.get(lotAuth2 + '/role/queryPageRole?pageNum=1&pageSize=9999').then(res => {
			this.setState({
				roleList : res.data.data
			});
		})
	}
	//表单查询
	filterSubmit = values => {
		values.pageNum = this.state.formValues.pageNum;
		values.pageSize = this.state.formValues.pageSize;
		this.fetch(values);
	};

	handleConfirm = (value, api, chooseData) => {
		console.log(this.state.selectedData)
		let str = ''
		for(var item of this.state.selectedData){
			str += item.id + ','
		}
		this.get(`${euqApplicationName}/parameter_setting_system/deleteExamine?ids=${str.slice(0, str.length - 1)}`).then(res => {
			this.success();
			this.fetch({ ...this.state.formValues });
			this.setState({selectedKeys:[]})
		});
	};

	//抽屉中信息列表
	drawerFormList = data => {
		const { lclx,roleList } = this.state;
		//TODO后续看看是否修改type
		const drawerFormList = [
			//TODO向select中添加测试数据试试
			{ type: 'INPUT', label: '流程名称', field: 'name', initialValue: data.name, required: true, },
			{ type: 'SELECT', label: '流程类型', field: 'processTypeId', initialValue: data.processTypeId, required: true , name: 'configValue', valueField: 'id', list:  lclx},
			{ type: 'SELECT', label: '用户组名称', field: 'roleId', initialValue: data.roleId, required: true , name: 'roleName', valueField: 'roleId', list:  roleList},
			{ type: 'TEXTAREA', label: '备注', field: 'remarks', initialValue: data.remarks }
		];
		return drawerFormList;
	};

	// 提交modal
	handleSubmit = data => {
		const id = this.state.chooseData && this.state.chooseData.id;
		if (id) {
			data = Object.assign({}, data, { id: id });
			data.updateId = localStorage.getItem('userId');
		} else {
			data.createId = localStorage.getItem('userId');
		}
		this.post(euqApplicationName + '/parameter_setting_system/addExamine', { data }).then(res => {
			this.success();
			this.fetch({ ...this.state.formValues });
			this.onClose();
		});
	};

	// 打开modal，判断是修改还是新增 0新增 1修改
	handleModal = (type, data) => {
		if (type) {
			this.setState({
				drawerTitle: '修改',
				drawerVisible: true,
				chooseData: data
			});
		} else {
			this.setState({
				drawerTitle: '添加',
				drawerVisible: true
			});
		}
	};

	onClose = () => {
		this.setState({
			drawerVisible: false,
			chooseData: {}
		});
		this.modalRef.props.form.resetFields();
	};

	render() {
		const columns = [
			{ title: '序号', width: 100, dataIndex: 'id' },
			{
				title: '详细',
				render: (record) => (
					<span>
						<a onClick={() => this.handleModal(1, record)}>修改</a>
					</span>
				)
			},
			{ title: '流程名称', dataIndex: 'name' },
			{ title: '流程类型',  dataIndex: 'processType' },
			{ title: '用户组名称', dataIndex: 'role' },
			{ title: '备注', dataIndex: 'remarks' }
		];

		const { chooseData, drawerVisible, drawerTitle, dataSource, loading, total, formValues,selectedKeys,selectedData } = this.state;

		const drawerProps = {
			onRef: ref => (this.modalRef = ref),
			visible: drawerVisible,
			width: 700,
			drawerFormList: this.drawerFormList(chooseData),
			submit: this.handleSubmit,
			onClose: this.onClose,
			title: drawerTitle
		};

		//序号旁的checkbox部分
		const rowSelection = {
			onChange: (selectedRowKeys, selectedRows) => {
				this.setState({
					selectedData:selectedRows,
					selectedKeys:selectedRowKeys
				})
				console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
			},
			selectedRowKeys:selectedKeys
			// getCheckboxProps: record => ({
			// 	disabled: record.name === 'Disabled User', // Column configuration not to be checked
			// 	name: record.name
			// })
		};

		return (
			<div className="shadow-radius">
				<Tabs
					tabBarExtraContent={
						<div className="buttonList">
							<Button icon="plus" onClick={() => this.handleModal(0, {})} type="primary">
								{' '}
								添加
							</Button>
							<BasicConfirm title="确认删除?" api={1} icon="delete" button={true} buttonName="删除" data={selectedKeys} handleConfirm={this.handleConfirm} />
						</div>
					}
				>
					<TabPane tab="审核流程" key="1">
						<Table columns={columns} rowSelection={rowSelection} rowKey={(record, index) => index} dataSource={dataSource} pagination={false} loading={loading} />
						<Paging total={total} formValues={formValues} fetch={pager => this.fetch(pager)} />
					</TabPane>
				</Tabs>

				<BasicDrawer {...drawerProps} />
			</div>
		);
	}
}
export default Form.create()(AuditProcess);

